import React, { Component } from 'react'

import '../assets/style/newHouse.less'
import { Picker, List, SearchBar, Toast, ActivityIndicator } from 'antd-mobile';
import Lists from '../components/list'

import axios from '../utils/http'
// import { provinceLite } from 'antd-mobile-demo-data';
const region = [
    {
        label: '华中',
        value: '华中',
    },

    {
        label: '华北',
        value: '华北',
    },
    {
        label: '华南',
        value: '华南',
    },
    {
        label: '华东',
        value: '华东',
    },

]
const price = [
    {
        label: '10000以下',
        value: '10000',
    },
    {
        label: '20000以下',
        value: '20000',
    },
    {
        label: '30000以下',
        value: '30000',
    },
    {
        label: '40000以下',
        value: '40000',
    },
    {
        label: '50000以下',
        value: '50000',
    },
    {
        label: '100000以下',
        value: '100000',
    },
    {
        label: '200000以下',
        value: '200000',
    },
    {
        label: '300000以下',
        value: '300000',
    },
]
const type = [
    {
        label: '普通住宅',
        value: '普通住宅',
    },
    {
        label: '公寓式住宅',
        value: '公寓式住宅',
    },
    {
        label: '花园洋房',
        value: '花园洋房',
    },
    {
        label: '小独栋',
        value: '小独栋',
    },
    {
        label: '联排别墅',
        value: '联排别墅',
    },
]

export default class newHouse extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: '美食',
            region: region,
            searchregion: "区域",
            searchprice: "价格",
            searchtype: "类型",
            cols: 1,
            price: price,
            asyncValue: [],
            type: type,
            bottomNav: ['首页', '新房', '二手', '出租', '我的'],
            store: [],
            dom: "",
            search: "",
            page: 1, limit: 5
        };
        this.debounce = this.debounce.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }

    onChange = (value) => {
        // this.setState({ value })
        console.log(value);
        //    this.handleChange()
    };
    handleChange = (e) => {
        this.setState({ search: e })
    }
    //节流函数
    debounce(func, wait = 500) {
        let timeout;  // 定时器变量
        return function (event) {
            clearTimeout(timeout);  // 每次触发时先清除上一次的定时器,然后重新计时
            event.persist && event.persist()   //保留对事件的引用
            //const event = e && {...e}   //深拷贝事件对象
            timeout = setTimeout(() => {
                func(event)
            }, wait);  // 指定 xx ms 后触发真正想进行的操作 handler
        };
    }
    clear = () => {
        setTimeout(() => {
            this.setState({ value: '' });
        }, 1000)
    };

    onClick = () => {
        setTimeout(() => {
            this.setState({
                region: region
            })
        });
    }
    onOk = (v, type) => {
        let value = v[0]

        setTimeout(() => {
            this.setState({
                [type]: value
            })
            let data = {
                area: this.state.searchregion === '区域' ? '' : this.state.searchregion,
                price: this.state.searchprice === '价格' ? '' : this.state.searchprice,
                type: this.state.searchtype === '类型' ? '' : this.state.searchtype,
                search: this.state.search
            }
            this.request(data)
        }, 120)

        //数据请求
    }
    searchdata = () => {
        let data = {
            area: this.state.searchregion === '区域' ? '' : this.state.searchregion,
            price: this.state.searchprice === '价格' ? '' : this.state.searchprice,
            type: this.state.searchtype === '类型' ? '' : this.state.searchtype,
            search: this.state.search
        }
        this.request(data)
    }
    searchType = async () => {
        console.log(this.state.searchregion);
        // let where = {
        //     region: "", price: "", type: ""
        // }
        // if (this.state.searchregion) {
        //     where.region = this.state.searchregion
        // }
        // if (this.state.searchprice) {
        //     where.price = this.state.searchprice
        // }
        // if (this.state.searchtype) {
        //     where.type = this.state.searchtype
        // }
        // const resdata = await axios({
        //     url: 'xxxxx',
        //     method: 'post',
        //     data: where
        // })
        // if (resdata.data.code === "200") {
        //     this.setState({
        //         store: resdata.data.data
        //     })
        // } else {
        //     Toast.fail(resdata.data.msg);
        // }
    }

    componentWillMount() {
        this.request()
    }

    // componentDidUpdate() {
    //     console.log(this.state.value);
    // }

    request = async (data, reload) => {
        const resdata = await axios({
            url: '/client/finddata',
            method: 'post',
            data: {
                limit: 5,
                page: reload ? this.state.page : 1,
                ...data
            }
        })
        console.log(resdata.data);
        if (resdata.data.code === 200) {
            let resArray
            if (reload) {
                resArray = JSON.parse(JSON.stringify(this.state.store))
            } else {
                resArray = []
            }
            resdata.data.data.forEach(item => {
                resArray.push(item)
            })
            this.setState({
                store: resArray
            })
        } else {
            this.setState({
                page: this.state.page -1
            })
            Toast.fail(resdata.data.msg);
        }
    }
    handleOnScroll = this.debounce(() => {
        let dom = document.querySelector('.newcontent')
        console.log(111);
        if (dom) {
            const contentScrollTop = dom.scrollTop; //滚动条距离顶部
            const clientHeight = dom.clientHeight; //可视区域
            const scrollHeight = dom.scrollHeight; //滚动条内容的总高度
            console.log(scrollHeight, clientHeight, contentScrollTop);
            if (contentScrollTop + clientHeight+1 >= scrollHeight) {
                setTimeout(() => {
                    this.setState({
                        page: this.state.page + 1
                    })
                    let data = {
                        area: this.state.searchregion === '区域' ? '' : this.state.searchregion,
                        price: this.state.searchprice === '价格' ? '' : this.state.searchprice,
                        type: this.state.searchtype === '类型' ? '' : this.state.searchtype,
                        search: this.state.search
                    }
                    this.request(data, 'load');
                })
                 // 获取数据的方法
            }
        }
    }, 1000)
    onCancel = () => {
        setTimeout(() => {
            this.setState({
                search: ""
            })
            this.request()
        })
      
    }
    onDismiss = (key, value) => {
        setTimeout(() => {
            this.setState({
                [key]: value
            })
            let data = {
                area: this.state.searchregion === '区域' ? '' : this.state.searchregion,
                price: this.state.searchprice === '价格' ? '' : this.state.searchprice,
                type: this.state.searchtype === '类型' ? '' : this.state.searchtype,
                search: this.state.search
            }
            this.request(data);
        })
    }
    componentDidMount() {
        let dom = document.querySelector('.newcontent')
        if (dom) {
            const contentScrollTop = dom.scrollTop; //滚动条距离顶部
            const clientHeight = dom.clientHeight; //可视区域
            const scrollHeight = dom.scrollHeight; //滚动条内容的总高度
            console.log(scrollHeight, clientHeight, contentScrollTop);
            if (contentScrollTop + clientHeight >= scrollHeight) {
                setTimeout(() => {
                    this.setState({
                        page: this.state.page + 1
                    })
                    let data = {
                        area: this.state.searchregion === '区域' ? '' : this.state.searchregion,
                        price: this.state.searchprice === '价格' ? '' : this.state.searchprice,
                        type: this.state.searchtype === '类型' ? '' : this.state.searchtype,
                        search: this.state.search
                    }
                    this.request(data, 'load');
                    console.log(this.state.page,300);  // 获取数据的方法
                })

            }
        }
    }
    render() {

        return (
            <div className="newHouseStyle" >
                <SearchBar className="searchbar" value={this.state.search} onChange={this.handleChange} onCancel={this.onCancel} onBlur={this.searchdata} placeholder="请输入楼盘名或地址" />
                <div className="picker">
                    <Picker
                        className="Pickers"
                        data={this.state.region}
                        cols={this.state.cols}
                        value={this.state.asyncValue}
                        onPickerChange={this.onPickerChange}
                        onOk={(evl) => { this.onOk(evl, 'searchregion') }}
                        extra={this.state.searchregion}
                        onDismiss={() => { this.onDismiss('searchregion', '区域') }}
                    >
                        <List.Item arrow="horizontal" size="small" onClick={this.onClick}></List.Item>
                    </Picker>
                    <Picker
                        className="Pickers"
                        data={this.state.price}
                        cols={this.state.cols}
                        value={this.state.asyncValue}
                        onOk={(evl) => { this.onOk(evl, 'searchprice') }}
                        extra={this.state.searchprice}
                        onDismiss={() => { this.onDismiss('searchprice', '价格') }}
                    >
                        <List.Item arrow="horizontal" size="small" onClick={this.onClick}></List.Item>
                    </Picker>
                    <Picker
                        className="Pickers"
                        data={this.state.type}
                        cols={this.state.cols}
                        value={this.state.asyncValue}
                        onPickerChange={this.onPickerChange}
                        onOk={(evl) => { this.onOk(evl, 'searchtype') }}
                        extra={this.state.searchtype}
                        onDismiss={() => { this.onDismiss('searchtype', '类型') }}
                    >
                        <List.Item arrow="horizontal" size="small" onClick={this.onClick}></List.Item>
                    </Picker>
                </div>
                <div className="newcontent" onScrollCapture={this.handleOnScroll}>
                    {
                        this.state.store.length ? this.state.store.map((item, index) => {
                            return <Lists href="/newHousedetail" data={item} key={index}></Lists>
                        }) : ''
                    }
                    {
                        this.state.store.length > 4 ? <div className="loading-example">
                            <ActivityIndicator animating />
                        </div> : ""
                    }

                </div>

            </div>
        )
    }
}


